<template>
  <div class="container_card_oder">
    <!-- 卡券订单详情 -->
    <div class="topbox">
      <div class="top">
        <img
          src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.3/clock.png"
          alt
          class="icon"
        />
        <span v-if="list.order_status==1">{{list.order_status_name}}</span>
        <span v-if="list.order_status==2">{{list.order_status_name}}</span>
        <span v-if="list.order_status==3">{{list.order_status_name}}</span>
        <span v-if="list.order_status==4">{{list.order_status_name}}</span>
        <span v-if="list.order_status==5">{{list.order_status_name}}</span>
        <span v-if="list.order_status==6">{{list.order_status_name}}</span>
        <span v-if="list.order_status==7">{{list.order_status_name}}</span>
        <span v-if="list.order_status==8">{{list.order_status_name}}</span>
        <span v-if="list.order_status==9">{{list.order_status_name}}</span>
        <span v-if="list.order_status==10">{{list.order_status_name}}</span>
        <span v-if="list.order_status==11">{{list.order_status_name}}</span>
        <span v-if="list.order_status==12">{{list.order_status_name}}</span>
        <span class="right" v-if="list.is_cancel_button==1">
          剩余支付时间：
          <span class="time" v-if="timer">{{timer}}</span>
        </span>
      </div>
    </div>
    <!-- 卡样式 -->
    <div
      class="box"
      v-if="list.goods_type==1"
      :style="{background: 'url(' + imgUrl+list.goods_image + ')', backgroundSize:'100%,100%'}"
    >
      <div class="right">
        <div class="name">{{list.goods_name}}</div>
        <div class="describe">{{list.goods_describe}}</div>
        <div class="price">
          <span class="symbol">¥</span>
          {{list.goods_sale_price}}
          <!-- <span class="least">最低可至¥{{list.goods_min_sale_price}}</span> -->
        </div>
      </div>
    </div>

    <!-- 券样式 -->

    <div class="box1" v-if="list.goods_type==2">
      <div class="left">
        <div class="title">
          <span class="type">[{{list.goods_sign}}]</span>
          {{list.goods_name}}
        </div>
        <div class="desc">{{list.goods_describe}}</div>
      </div>
      <div class="right">
        <span class="icon">¥</span>
        {{list.goods_sale_price}}
      </div>
    </div>

    <ul class="info">
      <li class="li">
        订单编号
        <span class="text">{{list.order_sn}}</span>

        <div class="btn" @click="copyNumber(list.order_sn)">复制</div>
      </li>
      <li class="li">
        付款时间
        <span class="text">{{list.order_pay_time}}</span>
      </li>
      <li class="li">
        有效期至
        <span class="text">{{list.goods_validity_end_time}}</span>
      </li>
      <li class="li">
        推荐人手机号
        <span class="text" style="margin-left:12px">{{list.referee_phone}}</span>
      </li>
    </ul>

    <ul class="info price_list">
      <li class="li">
        <span v-if="list.goods_type==2">券价格</span>
        <span v-if="list.goods_type==1">卡价格</span>
        <span class="num">￥{{list.goods_sale_price}}</span>
      </li>
      <li class="li">
        优惠券优惠
        <span class="num">￥{{list.order_ticket_money}}</span>
      </li>
      <li class="li">
        兑换码优惠
        <span class="num">￥{{list.order_serial_number_money}}</span>
      </li>
      <li class="li" v-if="list.goods_deduction_type ==1">
        金币抵扣
        <span class="num">￥{{list.order_gold_credit}}</span>
      </li>
      <li class="li" v-if="list.goods_deduction_type ==2">
        银币抵扣
        <span class="num">￥{{list.order_silver_credit}}</span>
      </li>
      <li class="li" v-if="list.order_type ==2">
        <span v-if="list.goods_type==2">券定金</span>
        <span v-if="list.goods_type==1">卡定金</span>
        <span class="num">￥{{list.order_deposit_money}}</span>
      </li>
      <li class="li" v-if="list.order_type ==2">
        尾款支付
        <span class="num">￥{{list.order_final_money}}</span>
      </li>
    </ul>
    <div class="bottombox">
      <div class="btn" v-if="list.is_pay_button==1" @click="payment(list.order_id)">去付款</div>
      <div
        class="btn btn1"
        :class="list.is_pay_button==1?'btn2':''"
        v-if="list.is_cancel_button==1"
        @click="orderCancel(list.order_id)"
      >取消订单</div>
      <div class="btn" @click="finalPayment" v-if="list.is_finalpay_button==1">补尾款</div>
      <div
        class="btn btn1"
        :class="list.is_finalpay_button==1?'btn2':''"
        @click="refund()"
        v-if="list.is_refund_button==1"
      >申请退款</div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import payEvent from "@/assets/js/pay2.js";
export default {
  data() {
    return {
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      timer: "",
      interval: "",
      order_id: "",
      list: ""
    };
  },

  methods: {
    copyNumber(e) {
      wx.setClipboardData({
        data: e,
        success: function(res) {
          wx.getClipboardData({
            success: function(res) {}
          });
        }
      });
    },

    getData(e) {
      common.fly_post(
        "/api/v4_5/market_order/orderDetail",
        {
          order_id: e
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.status_code == 0) {
            if (!res.data) {
              //没有订单
              return;
            }

            this.list = res.data;
            this.list.order_pay_time = new Date(
              res.data.order_pay_time * 1000
            ).Format("yyyy-MM-dd hh:mm:ss");
            // this.timer = this.limitTimeFilter(res.data.order_expired_time);
            this.list.goods_validity_end_time = new Date(
              res.data.goods_validity_end_time * 1000
            ).Format("yyyy-MM-dd");
            this.getTimer(res.data.order_expired_time);

            this.$forceUpdate();
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        }
      );
    },
    refund() {
      wx.navigateTo({
        url: "/pages/ct_store/apply_refund/main?order_id=" + this.list.order_id
      });
    },
    orderCancel(e) {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post(
        "/api/v4_5/market_order/orderCancel",
        {
          order_id: e
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.status_code == "0") {
            this.getData(this.order_id);
            wx.showToast({
              title: "订单取消",
              icon: "none",
              duration: 2000,
              mask: true
            });
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        }
      );
    },
    finalPayment() {
      //补尾款
      wx.navigateTo({
        url:
          "/pages/ct_store/confirm_info/main?order_scene=1" +
          "&order_type=3" +
          "&goods_id=" +
          this.list.goods_id +
          "&order_id=" +
          this.list.order_id
      });
    },
    payment(order_id) {
      common.fly_post(
        "/api/v4_5/market_order/orderPay",
        {
          order_id: order_id
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.status_code == 0) {
            payEvent(
              res.data.body_title,
              res.data.order_sn,
              res.data.order_price,
              res.data.order_type
            );
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        }
      );
    },
    // 倒计时不读秒
    limitTimeFilter(result) {
      var now = new Date() / 1000;
      result = Math.floor(result - now);

      if (result > 0) {
        var second = parseInt(result % 60); // 计算秒 ，取余
        var minite = parseInt((result / 60) % 60); //计算分 ，换算有多少分，取余，余出多少秒
        var hour = parseInt((result / 60 / 60) % 24); //计算小时
        // console.log(hour +'---hour')
        if (hour == 0) {
          hour = "00";
        } else {
          hour = "01";
        }
        if (minite < 10) {
          minite = "0" + minite;
        } else {
          minite = minite;
        }
        if (second < 10) {
          second = "0" + second;
        } else {
          second = second;
        }
        result = hour + ":" + minite + ":" + second;
        console.log(result);
      } else {
        result = "";
      }
      return result;
    },
    // 倒计时读秒
    getTimer(orderDate) {
      var that = this;
      //orderDate是订单生效时间，后台的Date类型传到前端成了毫秒
      var now = new Date() / 1000;
      var end = orderDate; //提交订单的时间+30min就是订单失效时间，后台Date传过来变成了毫秒
      var result = Math.floor(end - now); //result= 30*60s;

      that.interval = setInterval(sub, 1000); //定时器 调度对象
      /*封装减1秒的函数*/
      function sub() {
        if (result > 1) {
          result = result - 1;
          var second = Math.floor(result % 60); // 计算秒 ，取余
          var minite = Math.floor((result / 60) % 60); //计算分 ，换算有多少分，取余，余出多少秒
          var hour = Math.floor((result / 60 / 60) % 24); //计算小时
          // console.log(hour +'---hour')
          if (hour == 0) {
            hour = "00";
          } else {
            hour = "01";
          }
          if (minite < 10) {
            minite = "0" + minite;
          }
          if (second < 10) {
            second = "0" + second;
          }
          that.timer = hour + ":" + minite + ":" + second;
        } else {
          clearInterval(that.interval);
        }
      }
    }
  },
  onLoad(options) {
    wx.setNavigationBarTitle({
      title: "订单详情"
    });
    // console.log(options);
    if (options.order_id) {
      this.order_id = options.order_id;
      this.getData(options.order_id);
    }
    clearInterval(this.interval);
    // this.getTimer(this.list.order_expired_time);
    // Object.assign(this.$data, this.$options.data());
  },
  onShow() {
    clearInterval(this.interval);
  },
  onUnload() {
    clearInterval(this.interval);
  },
  onHide() {
    clearInterval(this.interval);
  },
  destoryed() {
    clearInterval(this.interval);
  }
};
</script>

<style scoped lang="less">
.container_card_oder {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f3f4f6;
  overflow: hidden;

  .topbox {
    width: 100%;
    background: #fff;
    padding: 12px 20px;
    box-sizing: border-box;
    .top {
      width: 334px;
      height: 28px;
      background: linear-gradient(
        270deg,
        rgba(249, 112, 77, 0) 0%,
        rgba(249, 112, 77, 0.12) 100%
      );
      border-radius: 14px;
      // margin: 0 0 12px 20px;
      color: #f9704d;
      font-size: 14px;
      line-height: 28px;
      box-sizing: border-box;
      padding-left: 38px;
      position: relative;
      .icon {
        width: 14px;
        height: 14px;
        position: absolute;
        top: 7px;
        left: 20px;
      }
      .right {
        font-size: 12px;
        float: right;
        .time {
          display: inline-block;
          width: 50px;
        }
      }
    }
  }
  // 卡样式
  .box {
    height: 155px;
    background-size: 100% 100%;
    padding: 20px;
    box-sizing: border-box;
    margin: 12px;
    color: #fff;
    border-radius: 8px;
    .right {
      height: 114px;
      position: relative;
      .name {
        width: 80%;
        height: auto;
        font-size: 18px;
        margin-bottom: 4px;
      }
      .describe {
        font-size: 14px;
        margin-bottom: 53px;
        height: 40px;
        width: 85%;
      }
      .price {
        font-size: 21px;
        font-weight: 500;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 29px;
        line-height: 39px;
        .symbol {
          font-size: 14px;
          margin-right: 1px;
        }
        .least {
          font-size: 12px;
        }
        .icon {
          width: 12px;
          height: 12px;
          display: inline-block;
          border-radius: 50%;
          margin-left: 8px;
          margin-right: 1px;
          vertical-align: middle;
        }
        .text1 {
          color: #f5d040;
          font-size: 10px;
          height: 14px;
          display: inline-block;
          line-height: 14px;
        }
      }
    }
  }
  // 券样式
  .box1 {
    height: 121px;
    margin: 12px;
    display: flex;
    background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.3/ticket_bg.png")
      no-repeat;
    background-size: 100% 100%;
    box-shadow: 1px 2px 6px 2px rgba(240, 240, 240, 1);
    border-radius: 8px;
    .left {
      width: 71.5%;
      padding: 14px;
      box-sizing: border-box;
      border-radius: 8px;

      .title {
        height: auto;
        font-size: 14px;
        color: #333333;
        margin-bottom: 10px;
        .type {
          color: #ff383e;
        }
      }
      .desc {
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
        line-height: 17px;
      }
    }
    .right {
      width: 28.5%;
      border-radius: 8px;
      font-size: 21px;
      color: #ff383e;
      // background:#fbfbfb;
      text-align: center;
      box-sizing: border-box;
      padding-top: 40px;
      .icon {
        font-size: 14px;
      }
      .least {
        font-size: 12px;
      }
    }
  }
  .info {
    width: 94.6%;
    margin: 10px;
    padding: 12px 10px 14px;
    background: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    .li {
      height: 16px;
      line-height: 16px;
      font-size: 12px;
      color: rgba(153, 153, 153, 1);
      margin-bottom: 12px;
      &.li:nth-last-of-type(1) {
        margin-bottom: 0;
      }
      .text {
        color: rgba(51, 51, 51, 1);
        margin-left: 36px;
        &.text1 {
          margin-left: 12px;
        }
      }
      .btn {
        width: 28px;
        height: 14px;
        background: rgba(234, 234, 234, 1);
        border-radius: 7px;
        font-size: 10px;
        color: rgba(102, 102, 102, 1);
        line-height: 14px;
        display: inline-block;
        margin-left: 12px;
        text-align: center;
      }
    }
  }
  .price_list {
    padding: 12px 10px;
    .num {
      font-size: 14px;
      color: rgba(51, 51, 51, 1);
      float: right;
    }
  }
  .bottombox {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    background: #fff;
    padding: 5px 10px 0px 0px;
    box-sizing: border-box;
    // position: relative;
    .btn {
      width: 106px;
      height: 38px;
      font-size: 14px;
      background: linear-gradient(
        226deg,
        rgba(254, 120, 161, 1) 0%,
        rgba(254, 123, 136, 1) 100%
      );
      border-radius: 19px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 38px;
      text-align: center;
      margin: 5px 0 40px;
      float: right;
    }
    .btn1 {
      border: 1px solid rgba(204, 204, 204, 1);
      background: #fff;
      color: #999;
    }
    .btn2 {
      margin-right: 16px;
    }
  }
}
</style>

